<template>
    <div class="formPrint">
      <div class="topbar">
        <div class="title">资产归还</div>
        <button type="button" class="el-button printBtn el-button--primary el-button--mini" @click="handlePrint">
          <span>打印</span>
        </button>
      </div>
      <div class="printBody">
        <div id="printForm">
          <table class="documentInfo" id="print-container">
            <tr>
              <td colspan="2">
                <div class="columnTitle">
                  <div>单据信息</div>
                  <div class="underline"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="label">单据编号</td>
              <td class="value">ZCCL2024041100001</td>
            </tr>
            <tr>
              <td class="label">借用人</td>
              <td class="value">何昊阳</td>
            </tr>
            <tr>
              <td class="label">借出时间</td>
              <td class="value">2024-07-30</td>
            </tr>
            <tr>
              <td class="label">预计归还时间</td>
              <td class="value">-</td>
            </tr>
            <tr>
              <td class="label">实际归还时间</td>
              <td class="value">-</td>
            </tr>
            <tr>
              <td class="label">备注</td>
              <td class="value">-</td>
            </tr>
          </table>
          <table class="assetList">
            <tr>
              <td colspan="5">
                <div class="columnTitle">
                  <div>资产列表</div>
                  <div class="underline"></div>
                </div>
              </td>
            </tr>
            <tr>
              <th>资产名称</th>
              <th>型号</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
            </tr>
            <tr v-for="asset in assets" :key="asset.name">
              <td>{{ asset.name }}</td>
              <td>{{ asset.model }}</td>
              <td>{{ asset.quantity }}</td>
              <td>{{ asset.unitPrice }}</td>
              <td>{{ asset.amount }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </template>
  
  <script>

  import print from 'print-js'


  export default {
    setup() {
      const assets = ref([
        { name: '电脑', model: '联想小新', quantity: '1', unitPrice: '5000', amount: '5000' },
        { name: '显示器', model: '戴尔U2419H', quantity: '1', unitPrice: '2000', amount: '2000' },
      ]);
  
      function open() {
  openFlag.value = true;
}
function handlePrint() {

  print({
    printable: 'print-container',
    type: 'html',
    scanStyles: true,
    targetStyles: ['*']
  });

}
  
      return {
        assets,
        handlePrint,
        open
      };
    },
  };
  </script>
  
  <style scoped>
  .formPrint {
    padding: 20px;
  }
  
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 24px;
    font-weight: bold;
  }
  
  .printBtn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .printBtn:hover {
    background-color: #0056b3;
  }
  
  @media print {
    .printBtn {
      display: none;
    }
  }
  
  .documentInfo,
  .assetList {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  
  .documentInfo th,
  .documentInfo td,
  .assetList th,
  .assetList td {
    border: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
  }
  
  .documentInfo th,
  .assetList th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333333;
  }
  
  .documentInfo td,
  .assetList td {
    color: #666666;
  }
  
  .underline {
    height: 2px;

    margin-top: 5px;
  }
  </style>